<nz-card>
  <app-water-mark></app-water-mark>
  <div nz-row>
    <div nz-col nzFlex="94px">所属类目:</div>
    <div nz-col nzFlex="1" class="tag-wrap" [ngStyle]="{maxHeight:expanded?'58px':'33px'}">
      <nz-tag (click)="allSel()" class="m-r-25 m-b-10" nzMode="checkable">
        <span class="sp-14">全部</span>
      </nz-tag>
      <ng-container *ngFor="let tag of tagArray">
        <nz-tag class="m-r-25 m-b-10" nzMode="checkable" [(nzChecked)]="tag.isChecked">
          <span class="sp-14">{{tag.name}}</span>
        </nz-tag>
      </ng-container>
    </div>
    <div nz-col nzFlex="50px">
      <a class="operate-text" *ngIf="!expanded" (click)="expanded = true">展开<i nz-icon nzType="down"
                                                                               nzTheme="outline"></i></a>
      <a class="operate-text" *ngIf="expanded" (click)="expanded = false">收起<i nz-icon nzType="up"
                                                                               nzTheme="outline"></i></a>
    </div>
  </div>
  <nz-divider class="m-0" nzDashed></nz-divider>
  <div nz-row class="m-t-20 m-b-20">
    <div nz-col nzFlex="94px">owner:</div>
    <div nz-col class="flex-1">
      <nz-select nzMode="multiple" [(ngModel)]="searchInfo.owner" [nzPlaceHolder]="'不限'">
        <nz-option nzValue="1" nzLabel="我自己"></nz-option>
        <nz-option nzValue="2" nzLabel="吴家豪"></nz-option>
        <nz-option nzValue="3" nzLabel="周星星"></nz-option>
        <nz-option nzValue="4" nzLabel="赵丽颖"></nz-option>
        <nz-option nzValue="5" nzLabel="姚明"></nz-option>
      </nz-select>
      <a class="operate-text m-l-7">只看自己的</a>
    </div>
  </div>
  <nz-divider class="m-0" nzDashed></nz-divider>
  <div nz-row class="m-t-20 m-b-20" [nzAlign]="'middle'">
    <div nz-col nzFlex="94px">其他选项:</div>
    <div nz-col nzFlex="1">
      <div nz-row>
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="12" nzXs="12">
          活跃用户：
          <nz-select [(ngModel)]="searchInfo.author" [nzPlaceHolder]="'不限'" class="max-width">
            <nz-option nzValue="1" nzLabel="李三"></nz-option>
          </nz-select>
        </div>
        <div nz-col [nzXXl]="8" [nzXl]="8" [nzLg]="8" [nzMd]="12" nzSm="12" nzXs="12">
          好评度：
          <nz-select [(ngModel)]="searchInfo.like" [nzPlaceHolder]="'不限'" class="max-width">
            <nz-option nzValue="1" nzLabel="优秀"></nz-option>
            <nz-option nzValue="2" nzLabel="普通"></nz-option>
          </nz-select>
        </div>
      </div>
    </div>
  </div>
</nz-card>
<nz-card class="m-t-20">
  <app-water-mark></app-water-mark>
  <nz-list [nzItemLayout]="'vertical'">
    <nz-list-item nzNoFlex *ngFor="let item of 8|numberLoop">
      <nz-list-item-meta>
        <nz-list-item-meta-title>
          <a>Alipay</a>
        </nz-list-item-meta-title>
        <nz-list-item-meta-description>
          <nz-tag>Ant Design</nz-tag>
          <nz-tag>设计语言</nz-tag>
          <nz-tag>蚂蚁金服</nz-tag>
        </nz-list-item-meta-description>
      </nz-list-item-meta>
      段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
      ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。
      <div class="m-t-15 info">
        <nz-avatar class="m-r-8" [nzSize]="'small'" [nzSrc]="'assets/imgs/default_face.png'"></nz-avatar>
        <a class="operate-text">付小小</a> <span class="m-r-8">发布在 </span> <a
        class="m-r-8 operate-text">https://ant.design</a>
        <time nz-typography nzType="secondary">2021-02-19 14:21</time>
      </div>
      <ul nz-list-item-actions>
        <nz-list-item-action><i nz-icon nzType="star" class="m-r-8"></i> 156</nz-list-item-action>
        <nz-list-item-action><i nz-icon nzType="like" class="m-r-8"></i> 156</nz-list-item-action>
        <nz-list-item-action><i nz-icon nzType="message" class="m-r-8"></i> 2</nz-list-item-action>
      </ul>
    </nz-list-item>
  </nz-list>

</nz-card>
